*{
	padding: 0px;
	margin: 0px;
}
html,body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.back1,.back2,.back3,.back4{
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../img/开始界面背景.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.yinyue{
	z-index: 1111;
    position: absolute;
    width: 4.5%;
    height: 8.5%;
    overflow: hidden;
    left: 0%;
    background-image: url(../img/音乐.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    top: 0%;
    animation: yy 2s linear infinite forwards;
}
@keyframes yy{
	100%{
		transform: rotate(360deg);
	}
}
.back5,.back6{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	
}
.logo1{
	position: fixed;
    width: 41%;
    left: 29%;
    top: -26%;
    opacity: 0;
    animation: logo1 3s linear forwards;
}
.star{
	position: absolute;
	width: 15%;
	height: 20%;
	top: 55%;
	left: 40%;
}
.snake{
	position: absolute;
    width: 21%;
    height: 42%;
    top: 47%;
    left: 14%;
}
.dragon{
	position: absolute;
    width: 27%;
    height: 51%;
    top: 41%;
    left: 63%
}
.size1,.size2,.size3{
	position: absolute;
	width: 50%;
	opacity: 0;
}
.size4,.size5,.size6,.size7,.size8{
	position: absolute;
	width: 50%;
	left: 20%;
	top: 10%;
	opacity: 0;
}
.size1{
	left: 24%;
    top: 13%;
}
.size2{
	top: 34%;
    left: 35%;
}
.size3{
	top: 52%;
    left: 40%;
}
.size4{
	top: 9%;
    left: 24%;
}
.size5{
	left: 27%;
    top: 24%;
}
.size6{
	left: 32%;
    top: 37%;
}
.size7{
    top: 51%;
    left: 35%;
}
.size8{
	width: 40%;
    top: 62%;
    left: 49%;
}
.size1{
	animation:size1 2s 1s linear forwards;
}
.size2{
	animation:size2 2s 2s linear forwards;
}
.size3{
	animation:size3 2s 3s linear forwards;
}
.size4{
	animation:size4 1s 9s linear forwards;
}
.size5{
	animation:size5 1s 10s linear forwards;
}
.size6{
	animation:size6 1s 11s linear forwards;
}
.size7{
	animation:size7 1s 12s linear forwards;
}
.size8{
	animation: size8 1s 13s linear forwards;
}
.snan,.dran{
	animation:snan 1s linear forwards;
	opacity: 0;
}
.dran{
	animation:snan 1s 0.5s linear forwards ;
}
.star,.help{
	left: 42%;
    top: 46%;
    position: absolute;
    width: 16%;
    height: 16%;
    animation: star 1.5s 1s linear forwards;
    opacity: 0;
}
.help{
	top: 60%;
	animation: star 1.5s 2s linear forwards;
}
.logo{
	position: absolute;
    width: 44%;
    height: 86%;
    left: 27%;
    top: -16%;
    animation: logo 1s 1s linear forwards;
    opacity: 0;
}
.star_1,.help_1{
	position: absolute;
    width: 16%;
    height: 13%;
    background-color: red;
    top: 48%;
    left: 42%;
    border-radius: 90px;
    opacity: 0;
    display: none;
}
.help_1{
	top: 62%;
}
.help_2{
	height: 72%;
    position: absolute;
    width: 53%;
    top: 11%;
    left: 27%;
    display: none;
    opacity: 0;
}
.close{
	width: 2%;
    position: absolute;
    top: 19%;
    left: 73%;
    display: none;
    opacity: 0;
}
.mountion{
	left: -1%;
    height: 25vw;
    top: 53%;
    position: fixed;
    width: 101%;
	
}
.wave1,.wave2,.wave3,.wave4,.wave5{
	position: fixed;
    width: 100%;
    top: -28%;
}
.obstacle1{
	height: 100px;
    position: fixed;
    width: 269px;
    top: 33%;
}
.obstacle2{
	left: 8%;
    height: 24%;
    position: fixed;
    width: 6%;
    top: 33%;
}
.obstacle3{
	position: fixed;
    width: 26%;
    height: 14%;
    left: 28%;
    top: 50%;
}
.obstacle4{
	position: fixed;
    width: 27%;
    height: 14%;
    left: 43%;
    top: 50%;
}
.obstacle5{
	position: fixed;
    width: 27%;
    height: 14%;
    left: 58.5%;
    top: 50%;
}
.kqq{
	position: fixed;
    width: 1%;
    height: 20%;
    /*background-color: red;*/
    top: 14%;
    left: 1%;
}
.snake_role{
	position: fixed;
    width: 7%;
    height: 15%;
    left: 2vw;
    top: 10%;
}
.ob1{
	position: fixed;
    width: 12.5vw;
    height: 2vw;
    /*background: red;*/
    top: 32%;
    left: 7%;
}
.obstacle6{
	position: fixed;
    width: 6%;
    height: 23%;
    top: 41%;
    left: 84%;
}
.obstacle7{
	position: fixed;
    width: 7%;
    height: 9%;
    top: 17%;
    left: 47%;
}
.ob2{
	position: fixed;
    width: 100%;
    height: 5%;
    background-color: red;
    top: 100%;
}
.ob3{
	position: fixed;
    width: 27%;
    height: 3%;
    /*background-color: red;*/
    top: 52%;
    left: 22%;
}
.ob4{
	position: fixed;
    width: 2%;
    height: 23%;
    left: 11.5%;
    /*background-color: red;*/
    top: 36%;
}
.ob5{
	position: fixed;
    width: 1%;
    left: 43%;
    top: 50%;
    height: 16%;
    background-color: red; 	
}
.ob6{
	position: fixed;
    width: 20%;
    height: 10%;
    top: 44%;
    left: 43%;
    background-color: red;
}
.zaw1{
	position: fixed;
    width: 25%;
    left: 43%;
    top: 44.5%;
    height: 12%;
    background-color: red;
}
.species{
	position: fixed;
    width: 4%;
    top: 10%;
    left: 48.5%;
    opacity: 0;
    
}
.jsjb{
	position: fixed;
    width: 2%;
    top: 1%;
    left: 37%;
}
.species2{
	position: fixed;
    width: 4%;
    top: 43%;
    left: 56.5%;
    animation: 2s 0.5s ry linear infinite ;
}
.js{
	position: fixed;
    top: 0.5%;
    left: 39%;
    font-size: 30px;
}
.rome{
	position: fixed;
    width: 9%;
    top: 33%;
    left: 64%;
	animation: rome 1s linear infinite;
}
.ry{
	position: fixed;
    width: 4%;
    top: 44%;
    left: 76%;
    animation: 2s ry linear infinite ;
}
.ry2{
	position: fixed;
    width: 2%;
    top: 1%;
    left: 47%;
}
.ryjs{
	position: fixed;
	 top: 0.5%;
    left: 49%;
    font-size: 30px;
}
.yh{
	position: fixed;
    width: 10%;
    top: 40%;
    left: 63.5%;
    opacity: 0;
    
}
.gg{
	position: fixed;
    width: 34%;
    top: 12%;
    left: 32%;
    animation: gg 1s linear 3;
}
.fh,.fh2{
	position: fixed;
    width: 7%;
    top: 54%;
    left: 45%;
    animation: fh 1s 3s linear forwards;
    opacity: 0;
}
.sw{
	position: fixed;
    width: 20%;
    left: 39%;
    top: 10%;
    animation: sw 1s linear 3;
}
.yxsb{
	position: fixed;
    font-size: 69px;
    top: 49%;
    left: 42%;
    -webkit-text-stroke: 2px white;
}
.fh2{
	top: 60%;
}
.he{
	position: fixed;
    width: 100%;
    height: 3%;
    top: 97%;
}
.jxgz{
	position: fixed;
    width: 15%;
    top: 49%;
    left: 44%;
}
.cl1{
	position: fixed;
    width: 10%;
    top: 31%;
    left: 34%;
}
.cl2{
	position: fixed;
    width: 10%;
    top: 45%;
    left: 59%;
}
.long2{
	position: fixed;
    width: 10%;
    top: 24%;
    left: 63%;
    opacity: 0;
    /*animation:long2 2s linear forwards;*/
}
@keyframes long2{
	100%{
		top: 20%;
		opacity: 1;
	}
}
@keyframes logo1{
	50%{
		opacity: 0.3;
	}
	100%{
		opacity: 1;
	}
}
@keyframes sw{
	50%{
		opacity: 0;
	}
}
@keyframes fh{
	100%{
		opacity: 1;
	}
}
@keyframes gg{
	50%{
		transform: scale(1.2);
	}
}
@keyframes yh{
	0%{
		transform: scale(0);
	}
	50%{
		transform: scale(2);
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes rome{
	50%{
		transform: scale(1.1);
	}
}
@keyframes ry{
	50%{
		transform: translateY(-30px);
	}
}
@keyframes species{
	0%{
		opacity: 1;
	}
	20%{
		left: 42.5%;
		top: 10%;
		opacity: 1;
	}
	100%{
		left: 42.5%;
		top: 43%;
		opacity: 1;
	}
}
@keyframes jump{
	50%{
		transform: translate(0px,-100px);
	}
	
	
}
@keyframes snake_role{
	100%{
		transform: translate(0px,600px);
	}
}
@keyframes help_2{
	100%{
		opacity: 1;
	}
}
@keyframes close{
	100%{
		opacity: 1;
	}
}
@keyframes logo{
	100%{
		opacity: 1;
	}
}
@keyframes star{
	0%{
		transform: scale(0.4);
		opacity: 1;
	}
	20%{
		transform: scale(1);
		opacity: 1;
	}
	40%{
		transform: scale(0.6);
		opacity: 1;
	}
	60%{
		transform: scale(1);
		opacity: 1;
	}
	80%{
		transform: scale(0.8);
		opacity: 1;
	}
	100%{
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes snan{
	0%{
		top: 100%;
	}
	100%{
		top: 47%;
		opacity: 1;
	}
}
@keyframes size1{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes size2{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes size3{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes size4{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes size5{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes size6{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes size7{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes size8{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}